<!DOCTYPE html>
<html lang="en">
    <head lang="en">
        <meta charset="UTF-8">
        <title>DrawCircle</title>
        <style type="text/css">
            *{margin:0;padding:0;list-style-type:none;}
            a,img{border:0;}
            body{font:16px/180% Arial, Helvetica, sans-serif, "新宋体";}
            #main{width:500px;margin:30px auto 0 auto;}

            /* dropdown */
            #dropdown{
                width: 50px;
                margin:0 auto;
                border-radius: 6px;
                position:absolute
            }
            #dropdown p{
                width:50px;
                height:35px;
                line-height:35px;
                padding-left:30px;
                padding-right:20px;
                border:4px solid green;
                background:green
                url(arrow.gif) no-repeat right 8px;
                color:#ffffff;
                border-radius: 6px;
                cursor:pointer
                }
            #dropdown ul{
                 width:105px;
                 background:#e8f5fe;
                 margin-top:2px;
                 border:2px solid #a9c9e2;
                 position:absolute;
                 border-radius: 6px;
                 display:none
                }
            #dropdown ul li{
                height:24px;
                line-height:24px;
                text-indent:7px
            }
            #dropdown ul li a{
                display:block;
                height:24px;
                color:#807a62;
                text-decoration:none
            }
            #dropdown ul li a:hover{
                background:#c6dbfc;
                 color:green
                }
        </style>

        <style>
            *{
                margin: 0;
                padding: 0;
            }
            @keyframes show {
                0% {
                    opacity: 0;
                }

                100% {
                    opacity: 1;
                }
            }

            @keyframes hide {
                0% {
                    opacity: 1;
                }

                100% {
                    opacity: 0;
                }
            }

            .toast_box {
                /* width: 100%; */
                position: absolute;
                bottom: 50%;
                left: 50%;
                /* justify-content: center; */
                z-index: 10;
                transform: translate(-50%, -50%);
                display: none;
            }
            .toast_box p {
                box-sizing: border-box;
                padding: 10px 20px;
                width: max-content;
                /* 提示框的背景色 */
                background: #707070;
                color: #fff;
                font-size: 16px;
                text-align: center;
                border-radius: 6px;
                opacity: 0.8;
            }
            .btn {
                text-decoration: none;
                border: none;
                padding: 12px 40px;
                font-size: 16px;
                background-color: green;
                color: #fff;
                border-radius: 5px;
                box-shadow: 7px 6px 28px 1px rgba(0, 0, 0, 0.24);
                cursor: pointer;
                outline: none;
                transition: 0.2s all;
            }
            .btn:active {
                transform: scale(0.98);
                box-shadow: 3px 2px 22px 1px rgba(0, 0, 0, 0.24);
            }
        </style>
        <script id="vertex-shader" type="x-shader/x-vertex">
            attribute vec4 vPosition;
            uniform mat4 u_transMat;
            void main(){
              gl_Position = u_transMat * vPosition;
            }
        </script>
        <script id="fragment-shader" type="x-shader/x-fragment">
            precision mediump float;
            uniform vec4 u_FragColor;
            void main(){
                gl_FragColor = u_FragColor;
            }
        </script>

        <script type="text/javascript" src="webgl-utils.js"></script>
        <script type="text/javascript" src="initShaders.js"></script>
        <script type="text/javascript" src="drawCircle.js"></script>
        <script type="text/javascript" src="jquery.min.js"></script>
        <script type="text/javascript">
            $(function(){

                $("#dropdown p").click(function(){
                    var ul = $("#dropdown ul");
                    if(ul.css("display")=="none"){
                        ul.slideDown("fast");
                    }else{
                        ul.slideUp("fast");
                    }
                });

                $("#dropdown ul li a").click(function(){
                    var txt = $(this).text();
                    $("#dropdown p").html(txt);
                    var value = $(this).attr("rel");
                    $("#dropdown ul").hide();
                    if(value == 1){
                        location.reload();
                    }
                    if(value == 2){
                        document.body.innerHTML = "";
                    }
                });

            });
        </script>
    </head>
    <body>
        <div class="toast_box">
            <p id="toast"></p>
        </div>
        <div id="main">
            <div id="dropdown">
                  <p>-菜单-</p>
                  <ul>
                     <li><a href="#" rel="1">-刷新-</a></li>
                     <li><a href="#" rel="2">-清除-</a></li>
                  </ul>
              </div>
        </div>

        <canvas id="gl-canvas" width="600" height="600">
            Oops ... your browser doesn't support the HTML5 canvas element
        </canvas>
        <div class="mask" style="display: none"></div>
        <button class="btn" onclick="All()">全选</button>
    </body>
</html>


